<template>
  <div class="porject">
    <div class="porject_top">
      <div class="porject_top_title">
        <Title  class="porject_top_title1" :title="'项目案例'"></Title>
        <div class="porject_top_title_box">
          <i @click="arrowLeft" class="el-icon-arrow-left porject_left_arrow"></i>
          <i @click="arrowRight" class="el-icon-arrow-right porject_right_arrow"></i>
        </div>
      </div>
      <div v-if="getSiteProject.length != 0" class="porject_top_box">
        <div class="porject_top_box_left">
          {{ getCoreProject.name }}
        </div>
        <div class="porject_top_box_right">
          <template>
            <el-table
                :data="tableData"
                stripe
                >
              <el-table-column
                  prop="name"
                  label="属性"
                  min-width="80"
                  align="center"
              >
              </el-table-column>
              <el-table-column
                  prop="remark"
                  label="简述"
                  min-width="200"
                  align="left"
              >
              </el-table-column>
            </el-table>
          </template>
        </div>
      </div>
      <el-empty v-else description="暂无数据"></el-empty>

    </div>
    <div class="porject_bottom">
      <Title  class="porject_top_title1" :title="'网站案例'"></Title>
      <div v-if="getSiteProject.length !== 0" class="porject_bottom_box" >
        <div
            class="porject_bottom_item"
            v-for="(item,i) in getSiteProject"
            :key="i"
        >
          <img :src="$baseImg + item.icon" alt="">
          <p>{{item.name}}</p>
        </div>
      </div>
      <el-empty v-else description="暂无数据"></el-empty>

    </div>
  </div>
</template>

<script>
import Title from "@/components/title.vue";

export default {
  components: {Title},
  data(){
    return{
      getSiteProject:[],
      getCoreProject:[],
      porjectDataField:[],
      allData:[],
      num:0,
      tableData: []
    }
  },
  methods: {

    // 左键头
    arrowLeft(){
      this.num -= 1
      if(this.num <= 0){
        this.num = this.allData.length -1
      }
      this.getProject()
    },

    // 左键头
    arrowRight(){
      this.num += 1
      if(this.num >= this.allData.length){
        this.num = 0
      }
      this.getProject()
    },

    // 获取网站数据
    getProjectSite() {
      this.$axios.getSiteProject({take: 9999}).then(res => {
        this.getSiteProject = res.data
        console.log(this.getSiteProject.length == 0)
      })
    },

    // 获取核心项目数据
    getProject() {
      this.$axios.getCoreProject({take:9999}).then(res => {
        this.allData = res.data
        this.getCoreProject = res.data[this.num]
        // this.getCoreProject = res.data[12]
        this.tableData = res.data[this.num].coerField
      })
    },

  },
  mounted() {
    this.changeStyle(3)
    this.getProjectSite()
    this.getProject()
  }
}

</script>

<style scoped lang="less">
.porject{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;

  .porject_top{
    height: 39.5vh;
    background: #fff;
    border-radius: 2.083vw;
    padding: 2.1vw 2.5vw 2.1vw 2.5vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .porject_top_title{
      display: flex;
      justify-content: space-between;
      align-items: center;


      .porject_top_title_box{
        height: 1.71875vw;
        display: flex;

        i{
          font-size: .833vw;
          color: #555;
          width: 1.71875vw;
          line-height: 1.71875vw;
          border: 0.052vw solid #ececec;
          text-align: center;
          margin-right: 0.521vw;
          border-radius: 0.417vw;
        }
      }
    }

    .porject_top_box{
      height: 33.519vh;
      display: flex;
      justify-content: space-between;

      .porject_top_box_left{
        width: 52%;
        height: 100%;
        background: #222;
        border-radius: 1.5625vw;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.667vw;
        color: #fff;
      }

      .porject_top_box_right::-webkit-scrollbar{
        width: 0;
        height: 0;
      }

      /deep/ .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      .porject_top_box_right{
        width: 46%;
        color: #909399;
        overflow: auto;
        /deep/ .el-table__cell  {
          width: 10px !important;
        }
      }
    }


  }

  .porject_bottom{
    display: flex;
    justify-content: space-between;
    height: 29.3vh;
    background: #fff;
    border-radius: 2.083vw;
    padding: 1.7vw 2.5vw 1.7vw 2.5vw;
    flex-direction: column;

    .porject_bottom_box::-webkit-scrollbar-thumb {
      background: #f5f5f5;
    }

    .porject_bottom_box::-webkit-scrollbar{
      width: 0.1883vw;
      height: 0.2883vw;
    }

    .porject_bottom_box{
      display: flex;
      width: 100%;
      margin-top: 0.78125vw;
      overflow: auto;
      padding-bottom: 1vw;

      .porject_bottom_item:last-child{
        margin-right: 1vw;
      }
      .porject_bottom_item{
        margin-right: 6vw;

        img{
          display: block;
          width: 8vw;
          height: 8vw;
          border-radius: 1vw;
          overflow: hidden;
        }

        p{
          font-size: .833vw;
          color: #333;
          line-height: 1.042vw;
          font-weight: 700;
          text-indent: 0.365vw;
          margin-top: 0.7vw;
        }
      }
    }
  }

}

/deep/ .title_value{
  margin-top: 0vw !important;
  margin-left: 0vw !important;
  font-size: 1.146vw !important;
}

/deep/ .el-empty{
  padding: 1.3333vw 0;
  .el-empty__image{
    width: 10vw;
  }
  .el-empty__description {
    margin-top: 1vw;
  }
  .el-empty__description p {
    margin: 0;
    font-size: 1.7333vw;
    color: #909399;
  }
}
</style>